<template>
	<view class="goods">
		<!-- 商品图片【轮播】 -->
		<view class="goods-banner">
			<swiper :indicator-dots="detail.goodsCarouselList.length > 1">
				<swiper-item v-for="item, i in detail.goodsCarouselList" :key="i"><image  @click="previewImage(i)" :src="item" mode=""></image></swiper-item>
			</swiper>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="title">{{ detail.goodsName }}</view>
			<view class="desc">{{ detail.goodsIntro }}</view>
			<view class="desc">免邮费 顺丰快递</view>
			<view class="price">
				¥{{ detail.sellingPrice }}
				<text class="o_price">￥{{ detail.originalPrice }}</text>
			</view>
		</view>
		<!-- 商品介绍 -->
		<view class="goods-intro">
			<view class="tabs">
				<view>概述</view>
				<view>参数</view>
				<view>安装服务</view>
				<view>常见问题</view>
			</view>
			<!-- 渲染html内容结构 -->
			<rich-text class="content" :nodes="detail.goodsDetailContent"></rich-text>
		</view>
		<!-- 商品操作 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" open-type="contact" show-message-card/>
			<van-goods-action-icon icon="cart-o" text="购物车" @click="goShop" :info="shopStore.count || ''" />
			<van-goods-action-button @click="addShop" text="加入购物车" color="linear-gradient(to right,#6bd8d8, #1baeae)" />
			<van-goods-action-button text="立即购买" color="linear-gradient(to right,#0dc3c3, #098888)" />
		</van-goods-action>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { goodsDetailApi } from '../../api/modules/goods'
import { addShopApi } from '../../api/modules/shop';
import { ShopStore } from '../../store/shop';
import { imgTagAddStyle } from '../../utils';
const shopStore = ShopStore()

const state = reactive({ detail: { goodsCarouselList: [] } })

// * 预览图片
const previewImage = (index) => {
	uni.previewImage({
		urls: state.detail.goodsCarouselList,    // 预览图片列表
		current: index, // 预览索引
	})
}

// * 跳转购物车
const goShop = () => {
	uni.switchTab({ url: '/pages/shop/shop' })
}

// * 添加到购物车
const addShop = async () => {
	await addShopApi({ goodsId: state.detail.goodsId , goodsCount: 1 })
	uni.$Toast('添加成功')
	// 更新购物车列表
	shopStore.updateList()
}

// 页面加载
onLoad(async message => {
	// 1. 获取页面参数
	const { goodsId } = message
	if (!goodsId) return uni.$Toast('商品ID有误')

	// 2. 查询商品ID
	const { data } = await goodsDetailApi(goodsId)
	// 3. 处理数据字段
	data.goodsCarouselList[0] = data.goodsCoverImg
	data.goodsCarouselList.push('http://zhi.zeng.pub/new-bee/upload/20220827_1156352.jpg')
	data.goodsCarouselList.push('http://zhi.zeng.pub/new-bee/upload/20220822_16102037.jpg')
	// 处理图片宽度与间隙问题  解决IOS设置webp图片无法显示
	data.goodsDetailContent = imgTagAddStyle(data.goodsDetailContent, 'display: block; max-width: 100%;').replace(/webp/g, 'jpg')
	state.detail = data
	// console.log(data)
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { detail } = toRefs(state)
</script>

<style lang="scss">
// 商品图片
.goods-banner {
	width: 100%;
	height: 750rpx;
	swiper,
	image {
		width: 100%;
		height: 100%;
	}
}

// 商品信息
.goods-info {
	margin-top: 14rpx;
	padding: 0 20rpx;
	.title {
		font-size: 36rpx;
		text-align: left;
		color: #333;
	}
	.desc {
		font-size: 28rpx;
		text-align: left;
		color: #999;
		padding: 10rpx 0;
	}
	.price {
		color: #f63515;
		font-size: 44rpx;
		.o_price {
			color: #999;
			font-size: 30rpx;
			margin-left: 12rpx;
			text-decoration: line-through;
		}
	}
}

// 商品介绍
.goods-intro {
	width: 100%;
	padding-bottom: 100rpx;
	.tabs {
		@include fj();
		width: 100%;
		margin: 20rpx 0;
		view {
			flex: 1;
			padding: 10rpx 0;
			text-align: center;
			font-size: 30rpx;
			border-right: 2rpx solid #999;
			box-sizing: border-box;
			&:last-child {
				border-right: none;
			}
		}
	}
	.content {
		padding: 0 40rpx;
	}
}

.van-goods-action {
	border-top: 2rpx solid #eee !important;
}
</style>
